<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css背景</title>
    <style>
        /* 
            背景颜色 
                 background-color 默认transparent
            背景图片 logo  超大图片
                 background-image
            背景平铺  重复显示
                background-repeat
            背景图片位置 方位名词或精确单位
                background-position: x y
                    方位名词   top | center | bottom | left | center | right 
                        xy的顺序没有影响
                        只指定一个方位时 另一个默认为居中对齐
                    精确单位 x y的位置不能颠倒
                        只有一个值时 另一个默认居中
                    混合单位    xy不能颠倒
            背景图片固定 设置图像是否固定或者随着页面其余部分滚动
                background-attachment
            背景属性复合写法 顺序没有要求

            背景色半透明
                  background: rgba(red, green, blue, alpha);
                   alpha透明度
        */
        div.aa {
            background-color: palegreen;
            width: 300px;
            height: 100px;
        }
        div.bb {
            background-color: green;
            background-image: url(/picture/背景图片.jpg);
            width: 1000px;
            height: 1000px;
            background-repeat: no-repeat;
        }
        div.bb>a {
            background-image: url(/picture/vue.jpg);
          width: 300px;
          height: 300px;
          display: block;
        }
       div.dd {
        background-color: goldenrod;
        background-repeat: no-repeat;
        background-image: url(/picture/vue.jpg);
        background-position: top right;
        width: 1000px;
        height: 400px;
       }
       h3.aa {
        /* background-color: palevioletred; */
        width: 120px;
        height: 50px;
        font-size: 10px;
        background-repeat: no-repeat;
        background-image: url(/picture/title_sprite.png);
        background-position: center left;
        text-indent: 2em;
        font-weight: 400;
        line-height: 50px;
       }
       div.kk {
        background-position: center,top;
        background-repeat: no-repeat;
         background-image: url(/picture/背景图片.jpg);
         width: 1500px;
         height: 1000px;
       }
       div.ddd {
        background-image: url(/picture/背景图片.jpg);
        
        background-repeat: no-repeat;

        width: 1920px;
        height: 882px;

       }
     a.ss {
        display: block;
        width: 300px;
        height: 200px;
        background-image: url(/picture/title_sprite.png);
        background-repeat: no-repeat;
     }
     div#root {
        /* background-attachment: fixed;
        background-repeat: no-repeat;
        background-image: url(/picture/背景图片.jpg); */
        width: 1500px;
        height: 500px;
        background: fixed url(/picture/背景图片.jpg) no-repeat center top;
     }
     p {
        color: red;
        font: 20px;
     }
     div.aw {
        color: green;
        background-color: yellow;
        width: 300px;
        height: 300px;
       background: rgba(0, 0, 0, 0.4);
     }
    </style>
</head>

<body>
    <div id="root">
        <p>{{word}}</p>
        <div class="aw">你好世界</div>
        <!-- <div class="ddd">   </div> -->
        
        <!-- <div class="kk"></div> -->
        <!-- <a href="http://www.baidu.com" class="cc"></a> -->
        <!-- <h1>css背景</h1> -->
        <!-- <div class="aa">背景颜色</div> -->
        <!-- <div class="bb"><a href="http://www.baidu.com"></a></div> -->
        <!-- <h1>背景图片位置</h1> -->
        <!-- <div class="dd"></div> -->
        <!-- <h3 class="aa">成长守护平台</h3> -->
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                word:Mock.mock('@cword(10)')
            }
        },
    })
</script>

</html>